<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="true"
    visible
    width="800px"
    @close="dialogClosed()"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter.native="dataFormSubmit()">
      <el-form-item label="类别" prop="typeCode">
        <el-input v-model="dataForm.typeCode" placeholder="类别"/>
      </el-form-item>
      <el-form-item label="类别名" prop="typeName">
        <el-input v-model="dataForm.typeName" placeholder="类别名"/>
      </el-form-item>
      <el-form-item label="值" prop="code">
        <el-input v-model="dataForm.code" placeholder="值"/>
      </el-form-item>
      <el-form-item label="值描述" prop="codeText">
        <el-input v-model="dataForm.codeText" placeholder="值描述"/>
      </el-form-item>
      <el-form-item label="父级" prop="pid">
        <el-input v-model="dataForm.pid" placeholder="父级"/>
      </el-form-item>
      <el-form-item label="排序级别" prop="lever">
        <el-input v-model="dataForm.lever" placeholder="排序级别"/>
      </el-form-item>
      <el-form-item label="值描述2" prop="codeText2">
        <el-input v-model="dataForm.codeText2" placeholder="值描述2"/>
      </el-form-item>
      <el-form-item label="值描述3" prop="codeText3">
        <el-input v-model="dataForm.codeText3" placeholder="值描述3"/>
      </el-form-item>
    </el-form>
    <!--   <span slot="footer" class="dialog-footer">
      <el-button @click="dialogClosed()">取消</el-button>
      <el-button v-if="data.status == 'wait'" id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</el-button>
    </span>-->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogClosed()">取消</el-button>
      <el-button :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { update } from '@/api/dic'
import { getToken } from '@/utils/auth'
import { saveQuit } from '@/api/list'
export default {
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        typeCode: '',
        typeName: '',
        code: '',
        pid: '',
        createTime: '',
        lever: '',
        codeText2: '',
        codeText: '',
        codeText3: ''
      },
      dataRule: {
        typeCode: [
          { required: true, message: '类别不能为空', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '类别名不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '值不能为空', trigger: 'blur' }
        ],
        codeText: [
          { required: true, message: '值描述不能为空', trigger: 'blur' }
        ]
      },
      submitButton: {
        text: '提交',
        status: false
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  mounted: function() {
    this.dataForm = this.data
  },
  methods: {
    // 表单提交
    dialogClosed() {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit() {
      saveQuit(this, 'dataForm', update)
    }

  }
}
</script>
